<template>
    <el-button type="primary" @click="bannerAdd">
      + 新增
    </el-button>
    <!-- v-loading 加载 -->
    <el-table :data="filterTableData" style="width: 100%" v-loading="loading">
      <el-table-column label="管理员id" prop="adminid" />
      <el-table-column label="管理员名称"  prop="adminname"/>
      <el-table-column label="role"  prop="role"/>
      <el-table-column label="checkedKeys"  prop="checkedKeys"/>
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 编辑 新增 -->
    <el-dialog v-model="dialogFormVisible" :title="isEdit ? '新增' : '修改'">
      <el-form :model="form">
        <el-form-item label="管理员姓名" label-width="100px">
          <el-input v-model="form.adminname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="role" label-width="100px">
          <el-input v-model="form.role" autocomplete="off" />
        </el-form-item>
        <el-form-item label="checkedKeys" label-width="100px">
          <el-input v-model="form.checkedKeys" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="editSave">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import { computed, ref, reactive, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { adminlist,deladmin,setadmin,addadmin } from '@/api/adminma.js'
  import { useRouter } from 'vue-router'
  
  const isEdit = ref(true)
  const loading = ref(true)
  const search = ref('')
  const dialogFormVisible = ref(false)
  const form = reactive({
    adminname: '',
    password: '',
    role: '',
    checkedKeys: ''
  })
  // const router = useRouter()
  
  // 新增
  const bannerAdd = async () => {
    form.adminname= ''
    form.password=''
    form.role=''
    form.checkedKeys= ''
    dialogFormVisible.value = true
    isEdit.value = true
  }
  
  // 修改
  const handleEdit = (index, row) => {
    console.log(index, row)
    // 显示编辑内容
    form.adminname= row.adminname
    form.password= row.password
    form.role = row.role
    form.checkedKeys = row.checkedKeys
    dialogFormVisible.value = true
    isEdit.value = false
  }
  
  // 保存编辑内容
  const editSave = async () => {
    // 什么时候关闭，一定是数据传输成功的时候
    dialogFormVisible.value = false
  
    if (!isEdit.value) {
      // 修改接口

      let res = await setadmin('/admin/update', {
        adminname :form.adminname,
        password:form.password,
        role:form.role,
        checkedKeys :form.checkedKeys
      })
      console.log(res.code);
      if (res.code == '200') {
        // 重新请求当前数据接口
        // console.log(res);
        console.log("修改");
        console.log(1);
        let res = await adminlist('/admin/list')
        tableData.value = res.data
      }
    } else {
      // 添加接口
      let res = await addadmin('/admin/add', {
        adminname :form.adminname,
        password:form.password,
        role:form.role,
        checkedKeys :form.checkedKeys
      })
      console.log(res.code);
      if (res.code == '200') {
        // 重新请求当前数据接口
        // console.log(res);
      console.log("添加");
        console.log(1);
        let res = await adminlist('/admin/list')
        tableData.value = res.data
        // 路由不靠谱
        // router.push({ path: '/home/bannerList' })
      }
    }
  }
  
  // 删除
  const handleDelete = (index, row) => {
    ElMessageBox.alert('您是否要删除？', '提示', {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: '确定',
      callback: async (action) => {
        if (action === 'confirm') {
          // 删除接口
          let res = await deladmin('/admin/delete', { adminid: row.adminid })
          // 是否删除成功
          if (res.code == '200') {
            tableData.value.splice(index, 1)
            ElMessage({
              type: 'success',
              message: `删除成功`,
            })
          }
        }
      },
    })
  }
  
  const filterTableData = computed(() =>
    tableData.value.filter(
      (data) =>
        !search.value ||
        data.name.toLowerCase().includes(search.value.toLowerCase())
    )
  )
  const tableData = ref([])
  onMounted(async () => {
    let res = await adminlist('/admin/list')
    // console.log(res.data)
    if (res.code == '200') {
      tableData.value = res.data
      loading.value = false
    }
  })
  </script>
  